<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox-demo01</title>
    <style>
        :root {
            box-sizing: border-box;
        }
        *,::before,::after {
            box-sizing: inherit;
        }
        body {
            background-color: #83a39b;
        }
        .container {
            max-width: 1080px;
            min-width: 600px;
            margin: 0 auto;
        }
        .site-nav {
            display: flex;
            /* 去掉浏览器默认的ul左边padding */
            padding-left: 0;
            /* 去掉列表的项目符号 */
            list-style: none;
            background-color: #67564d;
            /* 为容器设置内边距 */
            padding: .5em;
        }
        .site-nav > li > a {
            display: block;
            /* 需要设置 display 为 block 或 inline-block，这样才能
             * 让子元素撑开父元素 */
            padding: .5em 1em;
            text-decoration: none;
            color: #fff;
            background-color: #c27d69;
        }
        /* 选中所有前面有列表项的列表项(也就是说除了第一项之外的所有列表项) */
        .site-nav > li + li {
            margin-left: 20px;
        }
        .site-nav > .naive-right {
            /* 如果希望把 support 和 about dou推到最右边
               可以在 support 上添加 margin-left: auto 属性 */
            margin-left: auto;
        }
        .flex {
            display: flex;
        }
        .tile {
            padding: 1.5em;
            background-color: #fff;
        }
        .flex > * + * {
            margin-top: 0;
            margin-left: 1.5em;
        }
        .column-main {
            flex: 2
        }
        .column-sidebar {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .column-sidebar * + * {
            margin-top: 20px;
        }
        .column-sidebar > .tile {
            flex: 1;
        }
        .login-form > h3 {
            text-align: right;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0;
            font-size: .9em;
        }
        .login-form input:not([type=checkbox]):not([type=radio]) {
            display: block;
            margin-top: 0;
            width: 100%;
        }
        .login-form button[type=submit] {
            margin-top: 1em;
            border: 1px solid #cc6b5a;
            background-color: #fff;
            padding: .5em 1em;
            border-radius: 3px;
            cursor: pointer;
        }
        .centered {
            text-align: center;
        }
        .cost > span {
            margin-top: 0;
        }
        .cost {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 0.8;

        }
        .cost-currency {
            font-size: 2rem;
        }
        .cost-dollars {
            font-size: 4rem;
        }
        .cost-cents {
            font-size: 1.5rem;
            align-self: flex-start;
        }
        .cta-button {
            background-color: #cc6b5a;
            display: block;
            text-decoration: none;
            color: white;
            padding: .5em 1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Ink</h1>
        </header>
        <nav>
            <ul class="site-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/features">Features</a></li>
                <li><a href="/pricing">Pricing</a></li>
                <li><a href="/support">Support</a></li>
                <li class="naive-right">
                    <a href="/about">About</a>
                </li>
            </ul>
        </nav>
        <main class="flex">
            <div class="column-main tile">
                <h1>Team collaboration done right</h1>
                <p>
                    Thousands of teams from all over the world turn to <strong>Ink</strong>
                    to communicate and get things done.
                </p>
                <h1>Communication around the globe</h1>
                <p>
                    Thousands of teams from all over the world turn to Ink to communicate and get things done.
                </p>
                <h1>Instant access to your teams's document</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, atque.
                </p>
                <h1>Intuitive interface</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
            </div>
            <div class="column-sidebar">
                <div class="tile">
                    <form class="login-form">
                        <h3>Login</h3>
                        <p>
                            <label for="username">Username</label>
                            <input type="text" name="username" id="username" />
                        </p>
                        <p>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password">
                        </p>
                        <button type="submit">Login</button>
                    </form>
                </div>
                <div class="tile centered">
                    <small>Starting at</small>
                    <div class="cost">
                        <span class="cost-currency">$</span>
                        <span class="cost-dollars">20</span>
                        <span class="cost-cents">.00</span>
                    </div>
                    <a href="/pricing" class="cta-button">Sign up</a>
                </div>
            </div>
        </main>
    </div>
</body>
</html>